layui.use(['jquery','layer'], function() {
    let $ = layui.jquery;
    var layer = layui.layer;

    let items = [
        {name:'垂直度',img:'imgs/垂直度.jpg',value:1,color:'rgb(163, 244, 63)'},
        {name:'对称度',img:'imgs/对称度.jpg',value:2,color:'rgb(49, 227, 40)'},
        {name:'面轮廓度',img:'imgs/面轮廓度.jpg',value:3,color:'rgb(255, 111, 59)'},
        {name:'平面度',img:'imgs/平面度.jpg',value:4,color:'rgb(50, 241, 251)'},
        {name:'平行度',img:'imgs/平行度.jpg',value:5,color:'rgb(155, 136, 252)'},
        {name:'倾斜度',img:'imgs/倾斜度.jpg',value:6,color:'rgb(229, 159, 115)'},
        {name:'全跳动',img:'imgs/全跳动.jpg',value:7,color:'rgb(224, 144, 255)'},
        {name:'同心度同轴度',img:'imgs/同心度同轴度.jpg',value:8,color:'rgb(138, 120, 145)'},
        {name:'位置度',img:'imgs/位置度.jpg',value:9,color:'rgb(255, 158, 240)'},
        {name:'线轮廓度',img:'imgs/线轮廓度.jpg',value:10,color:'rgb(241, 78, 189)'},
        {name:'圆度',img:'imgs/圆度.jpg',value:11,color:'rgb(250, 119, 176)'},
        {name:'圆跳动',img:'imgs/圆跳动.jpg',value:12,color:'rgb(124, 243, 203)'},
        {name:'圆柱度',img:'imgs/圆柱度.jpg',value:13,color:'rgb(220, 227, 89)'},
        {name:'直线度',img:'imgs/直线度.jpg',value:14,color:'rgb(235, 194, 89)'}
    ]

    //选择正确提示
    let correctMsgItems = [
        "恭喜你,回答正确!",
        "正确,你真是太棒了!",
        "你的记忆力也太好了吧!",
        "恭喜你,回答完全符合标准!",
        "哈哈,你总能找到正确答案!",
        "没有错!它们就是一对的!"
    ];

    //选择错误提示
    let errorMsgItems = [
        "真遗憾,牵错线了!",
        "加油当合格的月老哦!",
        "我们俩不是一对啦!",
        "加油加油!未来合格红娘!",
        "哎哟!错了错了!"
    ]

    //随机打乱数组数据
    function shuffle(array) {  
        let currentIndex = array.length, temporaryValue, randomIndex;  
      
        // 当还剩有元素未洗牌时  
        while (0 !== currentIndex) {  
      
            // 选取剩下的元素…  
            randomIndex = Math.floor(Math.random() * currentIndex);  
            currentIndex -= 1;  
      
            // 并与当前元素交换  
            temporaryValue = array[currentIndex];  
            array[currentIndex] = array[randomIndex];  
            array[randomIndex] = temporaryValue;  
        }  
      
        return array;  
    } 
    
    //随机获取数组中n条数据
    function getRandomItems(arr, count) {  
        // 创建一个数组的副本，这样原数组不会被改变  
        let arrCopy = arr.slice();  
      
        // 存放结果的数组  
        let result = [];  
      
        // 确保请求的元素数量不超过数组的长度  
        count = Math.min(count, arrCopy.length);  
      
        // 使用Fisher-Yates算法随机选取元素  
        for (let i = 0; i < count; i++) {  
            // 从当前元素到数组末尾中随机选取一个索引  
            let randomIndex = Math.floor(Math.random() * (arrCopy.length - i)) + i;  
            // 将选取的元素添加到结果数组中  
            result.push(arrCopy[randomIndex]);  
            // 将选取的元素从原数组中移除，以确保不会再次被选取  
            arrCopy.splice(randomIndex, 1);  
        }  
      
        return result;  
    } 

    //随机打乱数据
    let randomItemsFrist = shuffle(items);

    //查找所有网格
    let gridItems = $('.grid-item')
    let gridIndex = []
    for (let i = 0; i < gridItems.length; i++) {
        gridIndex.push(i)
    }

    //随机获取14条不重复网格下标
    let randomItemsindex = getRandomItems(gridIndex, 14);

    //随机向网格添加字体并添加类名
    for (let i = 0; i < randomItemsindex.length; i++) {
        gridItems.eq(randomItemsindex[i]).addClass('gridTitle').attr('data-value',randomItemsFrist[i].value)
        let itemsTitle = "<span>"+randomItemsFrist[i].name+"</span>";
        gridItems.eq(randomItemsindex[i]).append(itemsTitle)
    }

    //查找不是标题类名的所有网格
    let gridImg = $('.grid-container').find('.grid-item').not('.gridTitle') 

    //随机打乱数据
    let randomItemsSecond = shuffle(randomItemsFrist);

    //添加图片
    for (let i = 0; i < gridImg.length; i++) {
        gridImg.eq(i).addClass('itemsImg').attr('data-value',randomItemsSecond[i].value)
        let itemsImg = "<img src="+randomItemsSecond[i].img+">"
        gridImg.eq(i).append(itemsImg)
    }


    //刷新页面
    $('.btn-again').click(()=>{
        location.reload();
    })

    //计数器
    let clickCount = 0;
    //第一次点击获取的值
    let fristValue = 0;
    //第一次点击获取的元素
    let fristGrid = {};
    //第二次点击获取的值
    let secondValue = 0;
    
    //网格点击事件
    function GridClick(){
        for (let i = 0; i < gridItems.length; i++) {
            gridItems.eq(i).click(()=>{
                if (gridItems.eq(i).hasClass('blue')) {
                    //再次点击取消背景色
                    gridItems.eq(i).removeClass('blue')
                    clickCount--;
                    fristValue = 0;
                }else{
                    //背景色设置为蓝色
                    gridItems.eq(i).addClass('blue')
                    clickCount++;
                    if (fristValue == 0) {
                        fristValue = gridItems.eq(i).attr('data-value');
                        fristGrid = gridItems.eq(i);
                        return
                    }
                    if (fristValue != 0) {
                        secondValue = gridItems.eq(i).attr('data-value');
    
                        if (secondValue != fristValue) {
                            //背景色设置为红色
                            gridItems.eq(i).removeClass('blue').addClass('red');
                            fristGrid.removeClass('blue').addClass('red');
    
                            //禁用点击事件
                            $('.grid-item').off('click');   
                            
                            //随机获取错误提示下标
                            let errorMsgIndex = Math.floor(Math.random() * errorMsgItems.length); 
                            layer.msg(errorMsgItems[errorMsgIndex],{icon:5,time:1500,shift:6},function(){
                                //重置
                                clickCount = 0;
                                fristValue = 0;
                                secondValue = 0;
                                gridItems.eq(i).removeClass('red');
                                fristGrid.removeClass('red');
                                fristGrid = {};
                                //恢复点击事件
                                $('.grid-item').on('click',GridClick())
                            })     
                        }else{
                            //随机获取正确提示下标
                            let correctMsgIndex = Math.floor(Math.random() * correctMsgItems.length);
                            layer.msg(correctMsgItems[correctMsgIndex],{icon:6,time:1500,shift:5})     
                            //背景色设置为绿色
                            gridItems.eq(i).removeClass('blue').addClass('green');
                            fristGrid.removeClass('blue').addClass('green');
                            //禁止点击事件
                            gridItems.eq(i).off('click')
                            fristGrid.off('click')
                            //重置
                            clickCount = 0;
                            fristValue = 0;
                            secondValue = 0;
                            fristGrid = {};

                            if ($('.green').length == 28) {
                                for (let j = 0; j < items.length; j++) {
                                    for (let i = 0; i < gridItems.length; i++) {
                                        gridItems.eq(i).removeClass('green')
                                        if (gridItems.eq(i).attr('data-value') == items[j].value) {
                                            gridItems.eq(i).css('background-color',items[j].color)  
                                        }   
                                    }   
                                }
                                
                                layer.confirm('是否重新开始?', {
                                    icon: 6,
                                    title: '恭喜你,全部选对啦!'
                                }, function(index) {
                                    layer.close(index);
                                    location.reload();
                                })
                            }
                            
                        }
                    }
                }      
            })
            
        }
    }
    GridClick()
    
})

